<template>
  <section>
    <div v-if="allIndexList">
      <el-tag v-for="indexCheck in business.tacticsIndexs" :key="indexCheck" closable class="tag-box" @close="handleClose(indexCheck)">
        {{getIndexName(allIndexList,indexCheck)}}
      </el-tag>
    </div>
    <el-select v-model="selTactics" size="mini">
      <el-option v-for="tactics in tacticsList" :key="tactics.id" :value="tactics.id" :label="tactics.name"></el-option>
    </el-select>

    <el-tree :data="tacticsIndexList" node-key="id" default-expand-all :expand-on-click-node="false" :props="defaultProps">
      <div class="custom-tree-node" slot-scope="{ node, data }">
        <div style="font-size: 15px;font-weight: bold">
          <span> {{ data.name }}</span>
        </div>
        <span style="color: #8b8b8b;">
          <span >{{ data.description }}</span>
        </span>
        <span >
          <i class="el-icon-check" @click="check(data)"  />
        </span>
      </div>
    </el-tree>


    <!--<el-table :data="tacticsIndexs" v-if="tacticsIndexs">-->
    <!--<el-table-column type="index"/>-->
    <!--<el-table-column label="指标名" prop="name"/>-->
    <!--<el-table-column label="指标">-->
    <!--<template slot-scope="scope">-->
    <!--<div v-for="index in scope.row.indexList" :key="index.id">{{index.name}}</div>-->
    <!--</template>-->
    <!--</el-table-column>-->
    <!--</el-table>-->
  </section>
</template>

<script>
  import errHandler from '@/assets/errHandler.js'
  import {mapGetters, mapActions, mapMutations} from 'vuex'
  export default {
    name: "choiceIndexs",
    props:['business'],
    data(){
      return{
        allIndexList:null,
        tacticsList:null,
        selTactics:null,
        tacticsIndexList:null,
        indexCheckList:[],
        defaultProps:{
          children: 'childrens',
          label: 'id'
        }
      }
    },
    watch:{
      selTactics(nv,ov){
        if(nv) this.getIndex(nv)
      },
      indexCheckList(nv,ov){
        console.log('观测一下------',nv)
      },
      business(nv,ov){
        if(nv) this.init(nv)
      }
    },
    created(){
      console.log('看下数组字符串--------',)
      this.init(this.business)
      this.getList()
      this.getAllIndex()
    },
    computed: {
      ...mapGetters(['department']),
    },
    methods:{
      ...mapActions({
        fetch: 'fetch'
      }),
      getAllIndex(){
        this.fetch({name:"getTacticsIndexList"})
          .then(res=>{
            console.log('策略指标列表-------',res)
            this.allIndexList=res
          })
          .catch(err=>{
            console.log(err)
            errHandler.handle(this,err)
          })
      },
      init(business){
        let checkIndex=business.tacticsIndexs
        if(checkIndex.length > 0) this.indexCheckList=this.indexCheckList.concat(checkIndex)
        else this.indexCheckList=[]
      },
      getList(){
        this.fetch({name:"getTacticsList"})
          .then(res=>{
            console.log('策略列表-------',res)
            this.tacticsList=res
            // this.getIndex(res)
          })
          .catch(err=>{
            console.log(err)
            errHandler.handle(this,err)
          })
      },
      getIndex(array){
        this.fetch({name:"getTacticsIndexList",data:{tacticsId:array}})
          .then(res=>{
            console.log('获取该策略下的指标-------',res)
            this.tacticsIndexList=res
          })
          .catch(err=>{
            console.log(err)
            errHandler.handle(this,err)
          })
      },
      handleNodeClick(e){
        console.log('这是啥？？？',e)
      },
      getNode(e){
        console.log('nodeKey-------',e)
      },
      check(data){
        console.log('check------',data)
        let index = this.business.tacticsIndexs.findIndex(t=>t === data.id)
        if(index >=0 ) this.business.tacticsIndexs.splice(index,1)
        else this.business.tacticsIndexs.push(data.id)
      },
      handleClose(tag){
        let index = this.business.tacticsIndexs.findIndex(t=>t === tag)
        if(index >=0 ) this.business.tacticsIndexs.splice(index,1)
        else this.$message({type:'error',message:'不存在或已删除，请刷新！'})
      },
      getIndexName(array,id){
        let tmp=null
        for(let i=0;i<array.length;i++){
          if(tmp !==null) break
          let ti=array[i]
          if(ti.id === id) tmp = ti.name
          else if(ti.childrens && ti.childrens.length>0) tmp=this.getIndexName(ti.childrens,id)
          else continue
        }
        return tmp
      }
    }
  }
</script>

<style scoped>
  .tag-box{
    margin: 0 3px;
  }
  .custom-tree-node{
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-content: space-between;
    width: 80%;
  }
</style>
